<template>
  <div>
    <!-- 等待时的遮罩 -->
    <div id="waitDialog">
      <div>等待中，请稍后</div>
    </div>
    <!-- 添加和查询 的部分-->
    <div class="button">
      <button id="btnAdd" class="button-color" @click="addGoodsInfo">
        添加商品信息
      </button>
      <button class="button-color" @click="findGoodsInfo">查询商品信息</button>
      <button class="button-color">重置</button>
    </div>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 90%">
      <el-table-column prop="gid" label="商品编号"> </el-table-column>
      <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
      <el-table-column prop="time" label="信息最后修改时间"> </el-table-column>
      <el-table-column prop="purchasePrice" label="商品价格"> </el-table-column>
      <el-table-column prop="tid" label="所属分类编号"> </el-table-column>
      <el-table-column prop="" label="操作">
        <el-button>删除</el-button>
        <el-button>编辑</el-button>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total">
    </el-pagination>
    <!-- <div class="card">
      <table border="1" style="border-collapse: 0">
        <thead>
          <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>信息最后修改时间</th>
            <th>商品价格</th>
            <th>所属分类编号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbData"></tbody>
        <div class="tc">
          <span id="spPre" class="pager">上一页</span>
          <span id="spPage"></span>
          <span id="spNext" class="pager">下一页</span>
        </div>
      </table>
    </div> -->

    <!-- 查询在弹出对话框  模糊查询-->
    <div class="dialog" v-show="findShow">
      <div class="dialog-content">
        <div>查询商品信息</div>

        <div>
          商品名称:<input
            type="text"
            id="keywords"
            placeholder="请输入商品关键字"
          />
        </div>

        <div>
          <button id="queryByName">查询</button>
          <button @click="close">关闭</button>
        </div>
      </div>
    </div>
    <!-- 添加的弹出对话框 -->
    <div v-show="addShow" class="dialog">
      <div class="dialog-content">
        <p style="text-align: center">添加商品信息</p>
        <div>商品名称：<input type="text" placeholder="请输入商品名称" /></div>
        <div>商品价格：<input type="text" placeholder="请输入商品价格" /></div>
        <div>
          所属商品分类：
          <select>
            <option value="1">家用电器类</option>
            <option value="2">服装</option>
            <option value="1">瓜果蔬菜类</option>
            <option value="1">电子设备</option>
            <option value="2">护肤品</option>
          </select>
        </div>
        <div>
          <el-button type="success">添加</el-button>
          <el-button type="danger" @click="close">关闭</el-button>
        </div>
      </div>
    </div>

    <!-- 修改的表单和对话框 -->
    <div v-show="updateShow">
      <div>
        <div>修改信息</div>
        <div>
          商品名称：
          <input type="text" id="editGoodsName" placeholder="商品名称" />
        </div>
        <div>
          商品价格：<input
            type="text"
            id="editGoodsPrice"
            placeholder="商品价格"
          />
        </div>
        <div>
          所属商品分类：<select id="editselect">
            <option value="1">家用电器类</option>
            <option value="2">服装</option>
            <option value="1">瓜果蔬菜类</option>
            <option value="2">电子设备</option>
            <option value="1">护肤品</option>
            <option value="2">饮料</option>

            <option value="其他">其他</option>
          </select>
        </div>
        <div>
          <button>保存</button>
          <button @click="close">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryAll } from "../../src/api/index.js";
import { format } from "../../src/utils/index.js";
export default {
  data() {
    return {
      addShow: false,
      findShow: false,
      updateShow: false,
      tableData: [],
      total: 0,
    };
  },
  methods: {
    addGoodsInfo() {
      this.addShow = true;
    },
    findGoodsInfo() {
      this.findShow = true;
    },
    close() {
      this.addShow = false;
      this.findShow = false;
    },
    getList() {
      let params = {};
      let _th = this;
      queryAll(params).then((res) => {
        for (let item of res.data.list) {
          item.time = format(item.lastupdate);
        }
        _th.total = res.data.page.total;
        _th.tableData = res.data.list;
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style scoped>
@import url("../assets/style/gl.css");

.dialog {
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.dialog-content {
  width: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  margin: 0 auto;
  padding: 20px;
}
</style>
